<template>
  <div>
    <!-- 弹出层 -->
    <van-dialog
      v-model="dialogShow"
      :showConfirmButton="false"
      :closeOnClickOverlay="true"
      @open="onOpen"
    >
      <div class="dialog-content">
        <div class="dialog-title">选择作业方</div>
        <div class="dialog-content-radio">
          <van-radio-group v-model="OperateObj" direction="horizontal">
            <div
              v-for="(item, index) in data.OperateObjList"
              :key="index"
              style="margin-bottom: 10px"
              :style="{ width: item.ID ? '50%' : '100%' }"
            >
              <van-radio :name="item.ID" v-if="item.ID">
                <span style="font-size: 14px">{{ item.Name }}</span>
              </van-radio>
              <div v-else>
                <van-radio :name="item.ID">
                  <span style="font-size: 14px">{{ item.Name }}</span>
                </van-radio>
                <van-field label="" v-model="checkTypeName"></van-field>
              </div>
            </div>
          </van-radio-group>
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="close">取消</span>
            <span class="complete-btn" @click="confirm">确定</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    data: {},
  },
  data() {
    return {
      OperateObj: "",
      checkTypeName: "",
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  methods: {
    onOpen() {
      if (this.data.OperateObj) {
       
        this.OperateObj = this.data.OperateObj;
      }
    },
    confirm() {
      let result = "";
      if (this.OperateObj!=undefined) {
        result = this.OperateObj;
        this.$emit("dg", result);
      }
    },
    close() {
      this.$emit("dg");
    },
  },
};
</script>

<style lang="less" scoped>
// 弹框
.dialog-content {
  position: relative;
  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 14px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
  .dialog-content-radio {
    padding: 0 15px;
  }
}
</style>